<template>
  <div class="base-search" v-if="searchFields.length > 0">
    <div class="search-item-box" v-for="(item, index) in searchFields" :key="'search-item-box_' + index">
      <div class="search-label">{{ item.label }}</div>
      <el-input class="search-input" v-model="item.val" :placeholder="i18n.fy.请输入 + item.label"
        @keyup.enter="changeSearch" />
    </div>
    <el-button class="search-btn" :icon="Search" :loading="dialog" @click="changeSearch">{{ i18n.fy.搜索
      }}</el-button>
  </div>
</template>

<script setup>
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
import { Search } from "@element-plus/icons-vue";
const dialog = ref(false);
const prpos = defineProps({
  searchFields: {
    type: Array,
    default: []
  }
});

const emits = defineEmits(["querySearch"]);
const changeSearch = () => {
  dialog.value = true;
  setTimeout(() => { dialog.value = false; }, 1000);
  let proms = {}
  prpos.searchFields.forEach(element => {
    if (element.val !== '') {
      proms[element.key] = element.val
    }
  });
  emits("querySearch", proms);
};
</script>

<style lang="scss">
.base-search {
  display: flex;
  height: 3rem;
  padding: 0.5rem;

  .search-item-box {
    display: flex;

    .search-label {
      font-size: 1.2rem;
      color: #fff;
      line-height: 3rem;
    }

    .search-input {
      margin-left: 1rem;
      width: 20rem;

      .el-input__inner {
        color: #000;
        background-color: #fff;
      }

      .el-input__wrapper {
        background-color: #fff;
      }
    }
  }

  .search-btn {
    margin-left: 1rem;
    background-color: #217093;
    color: #fff;
    border: none;
    margin-left: 1rem;
    height: 3rem;
    width: 10rem;
  }
}
</style>
